<template>
  <div>
    <van-form @submit="onSubmit">
      <div class="balance-top">
        <div class="balance-box">
          <van-field
            label-width="10"
            class="input-item"
            v-model="username"
            name="用户名"
            label="￥"
            placeholder="提现金额不小于20.0元"
          />

          <div class="balance-info">
            <h2>余额：0.00元</h2>
            <h2>全部提现</h2>
          </div>
        </div>
      </div>
     <!--  <div class="cell">
        <van-cell is-link>
          <template #title>
            <span>到账账户</span>
          </template>
          <template #default>
            <div class="cell-desc">
              <div>
                <img src="@/assets/images/ic_my_account_prompt.png" alt="" />
                <p>未完成绑卡</p>
              </div>

              <p>去完成</p>
            </div>
          </template>
        </van-cell>
      </div> -->
      <van-button
        class="balance-btn"
        disabled
        round
        block
        type="info"
        native-type="submit"
        color="linear-gradient(to right, #ebb15b, #f6c775)"
      >
        提现
      </van-button>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values)
    }
  }
}
</script>
<style lang="less" scoped>
.balance-top {
  padding: 30px 0;
  background: linear-gradient(#5b5b5b, #adadad, #fff);
  .balance-box {
    width: 330px;
    margin: 0 auto;
    padding: 40px 20px 50px 20px;
    border-radius: 10px;
    background: #fff;
    .input-item {
      border-bottom: 1px solid #eee;
    }
    .balance-info {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      h2 {
        font-size: 14px;
        color: #333;
      }
    }
  }
}
.cell {
  width: 330px;
  margin: 0 auto;
  border-bottom: 1px solid #ccc;
  span {
    font-weight: bold;
  }
  .cell-desc {
    display: flex;
    justify-content: flex-end;

    p {
      font-size: 12px;
    }
    div {
      display: flex;
      justify-content: flex-start;
      margin-right: 8px;
      img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
  }
}
.balance-btn {
  width: 330px;
  margin: 0 auto;
  height: 50px;
  margin-top: 40px;
  ::v-deep .van-button__text {
    font-size: 18px;
  }
}

</style>
